<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			html {
				height: 100%;
			}
			body {
				height: 100%;
			}
			img {
				border: 0;
			}
			div.wrap {
				width: 100%;
				margin: 0 auto;
				
				position: relative;
				background: #DDD;
			}
			.wrap div{
				width:200px;
				float:left;
			}
			.wrap div img {
				width: 200px;
			}
			button{
				position:fixed;
				bottom:0;
				left:50%;
				width:100px;height:30px;text-align:center;line-height:30px;
			}
		</style>
		<script src="common.js" type="text/javascript"></script>
		<script>
			window.onload=function(){
				var loadmore=document.getElementById("loadmore");
				var imgcontain_list=document.getElementsByClassName("wrap")[0].children;
				//向服务器请求图片
				loadmore.onclick=function(){
					var req=new XMLHttpRequest();
					req.open("get","http://localhost/h51642/day24/waterfall/2waterfall.txt",true);
					req.onreadystatechange=function(){
						if(req.readyState==4){
							//返回的图片集
							var imgcon=JSON.parse(req.responseText);
							//生成图片
							for(var i in imgcon){
								var img=document.createElement("img");
								img.src=imgcon[i].src;
								img.style.height=imgcon[i].height;
								//console.log(img)
								//判断图片放在哪一列，哪一列的高度最小放在哪一列
								if(i<=3){
									imgcontain_list[i].appendChild(img);
								}else{
									var j=minHeight(imgcontain_list);
									//console.log(j)
									imgcontain_list[j].appendChild(img);
								}
								
							}
						}
					}
					req.send();
				}
			}
			//判断最小高度
			function minHeight(arr){
				var minheight=0;
				var minIndex=0;
				for(var i in arr){
					//调用方法求得框的高度,和最小高度相比
					//console.log(arr[i])
					var conheight=single_imgsum_height(arr[i]);
					if(conheight<minheight){
						minheight=conheight;
						minIndex=i;
					}
				}
				return i;
			}
			//计算每个容器内的图片相加起来的高度
			function single_imgsum_height(box){
				//每一个框里的图片相加是本框的高度
				var single_imgarr=box.getElementsByTagName("img");
				var sum=0;
				for(var i in single_imgarr){
					
					//有错误
					
					
					console.log(single_imgarr[i])
					sum+=single_imgarr[i].height;
				}
				return sum;
			}
		</script>
	</head>

	<body>
		<div class="wrap">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<button id="loadmore">加载更多</button>
	</body>
</html>